<template>
    <div class="classic-demo">
        <div class="author-demo">
            <div>作者：陈炼</div>
            <div>日期：2017/11/02</div>
        </div>
        <div class="zlst-classic-operation-log">
            <div class="log-title clearfix">
                操作日志
                <Input class="search-input" type="text" icon="search"  placeholder="请输入..." style="width: 210px"></Input>
            </div>
            <div class="log-cont">
                <Timeline>
                    <TimelineItem>
                        <div class="line">
                            <div>
                                <span>2017-09-12 12:32</span>
                                <em>日志日志日志日志日志日志日志日志日志日志日志日志</em>
                            </div>
                            <i>查看操作日志</i>
                        </div>
                    </TimelineItem>
                    <TimelineItem>
                        <div class="line">
                            <div>
                                <span>2017-09-12 12:32</span>
                                <em>日志日志日志日志日志日志日志日志日志日志日志日志</em>
                            </div>
                            <i>查看操作日志</i>
                        </div>
                    </TimelineItem>
                    <TimelineItem>
                        <div class="line">
                            <div>
                                <span>2017-09-12 12:32</span>
                                <em>日志日志日志日志日志日志</em>
                            </div>
                            <div>
                                <span>2017-09-12 12:32</span>
                                <em>日志日志日志日志日志日志</em>
                            </div>
                            <i>查看操作日志</i>
                        </div>
                    </TimelineItem>
                </Timeline>
            </div>
        </div>
        <pre style="background-color: #ececec;">
            <code class="html" v-text="htmlCode">
            </code>
        </pre>
    </div>
</template>
<script>
    import hljs from 'highlight.js'
    export default {
        data () {
            return {
                htmlCode: '        <div class="zlst-classic-operation-log">\n' +
                '            <div class="log-title clearfix">\n' +
                '                操作日志\n' +
                '                <Input class="search-input" type="text" icon="search"  placeholder="请输入..." style="width: 210px"></Input>\n' +
                '            </div>\n' +
                '            <div class="log-cont">\n' +
                '                <Timeline>\n' +
                '                    <TimelineItem>\n' +
                '                        <div class="line">\n' +
                '                            <div>\n' +
                '                                <span>2017-09-12 12:32</span>\n' +
                '                                <em>日志日志</em>\n' +
                '                            </div>\n' +
                '                            <i>查看操作日志</i>\n' +
                '                        </div>\n' +
                '                    </TimelineItem>\n' +
                '                    <TimelineItem>\n' +
                '                        <div class="line">\n' +
                '                            <div>\n' +
                '                                <span>2017-09-12 12:32</span>\n' +
                '                                <em>日志日志</em>\n' +
                '                            </div>\n' +
                '                            <i>查看操作日志</i>\n' +
                '                        </div>\n' +
                '                    </TimelineItem>\n' +
                '                </Timeline>\n' +
                '            </div>\n' +
                '        </div>',
            }
        },
        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.classic-demo pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 0);
        }
    }
</script>
